<template>
  <div class="preview">
    <topology preview="true" :data="data" />
    <div class="tools" v-if="showTools">
      <a-button type="primary" @click="onBack">
        <a-icon type="left" /> 返回
      </a-button>
      <div></div>
      <a-button type="primary" style="margin-right: 0" @click="onSizeWindow">
        <a-icon type="border" />
        适合窗口大小
      </a-button>
      <a-button type="primary" @click="onSizeOri">
        <a-icon type="fullscreen-exit" />
        实际大小
      </a-button>
    </div>

    <YKdialog ref="ykRef"></YKdialog>
    <YTdialog ref="ytRef"></YTdialog>
    <YTdialogAll ref="ytallRef"></YTdialogAll>

    <el-dialog
      :title="FangZhenTitle"
      :visible.sync="FangZhenDialogVisible"
      :width="DialogWidth"
      :close-on-click-modal="false"
      center
      custom-class="myClass"
      :fullscreen="isFullscreen"
    >
      <div slot="title" class="headertitle">
        <span>{{ FangZhenTitle }} </span>
        <i class="el-icon-full-screen" @click="fullscreen"></i>
      </div>
      <timeReport
        :body="body"
        :header="header"
        :tableHeight="maxheight"
        :loadingShow="loadingShow"
        :getBodyData="getBodyData"
        :bodyConfigList="bodyConfigList"
      ></timeReport>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import Topology from "topology-vue";
import { DataMessage } from "@/utils/topolpgy/msg";
import IndexDBCache from "@/utils/indexedDB";
import {
  setMessageCallback,
  removeMessageCallback,
  getGuid32,
  publishMsg,
  checkSpecialId,
} from "@/mqtt";
import "@/utils/dialog";
import timeReport from "@/components/Topology/timeReport.vue";
import YTdialog from "@/components/Topology/YTdialog.vue";
import YKdialog from "@/components/Topology/YKdialog.vue";
import YTdialogAll from "@/components/Topology/YTdialogAll.vue";
Vue.use(Topology);

export default {
  name: "Preview",
  components: {
    timeReport,
    YTdialog,
    YKdialog,
    YTdialogAll,
  },
  data() {
    return {
      FangZhenDialogVisible: false, //方阵
      data: {},
      locked: 0,
      showTools: true,
      body: [],
      header: [],
      bodyConfigList: [],
      loadingShow: false,
      mySpecialId: "",
      getBodyData: false,
      FangZhenTitle: "",
      isFullscreen: false,
      DialogWidth: "60%",
      maxheight: 300,
      db: null,
    };
  },
  created() {},
  watch: {
    isFullscreen() {
      this.isFullscreen
        ? (this.maxheight = window.innerHeight - 80)
        : (this.maxheight = 300);
    },
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  beforeDestroy() {
    this.getBodyData = false;
  },
  mounted() {
    this.initIndexDB();
    setMessageCallback(this.onMessage);
    this.showTools = true;
    window.topology.on("node", this.onNodeMessage);
  },

  methods: {
    initIndexDB() {
      this.db = new IndexDBCache();
      this.db
        .initDB("topologyid")
        .then((res) => {
          if (res.type == "upgradeneeded") {
            console.log("indexDB数据库创建或更新成功");
          } else {
            console.log("indexDB数据库初始化成功");
            let key = this.$route.query.id;
            this.db
              .getDataByKey(key)
              .then((res) => {
                console.log("从indexDB数据库获取数据成功", res);
                this.data = res;
              })
              .catch((err) => {
                console.log("从indexDB数据库获取数据失败", err);
              });
          }
        })
        .catch((err) => {
          console.log("indexDB数据库初始化失败", err);
        });
    },
    fullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },
    onSizeWindow() {
      window.topology.fitView(16);
    },

    onSizeOri() {
      window.topology.open(this.data);
    },

    onBack() {
      let key = this.$route.query.id;
      this.db
        .deleteDB(key)
        .then((res) => {
          console.log("从indexDB数据库删除数据成功", res);
        })
        .catch((err) => {
          console.log("从indexDB数据库删除数据失败", err);
        });
      this.$router.go(-1);
    },

    onMessage(topic, msg) {
      //console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1024:
          switch (msg.funCode) {
            case 7:
              // if (this.mySpecialId == msg["specialId"]) {
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.body = msg.data.body;
                this.header = msg.data.header;
                this.header.forEach((e) => {
                  if (e.unit) {
                    e.name = e.name + "(" + e.unit + ")";
                  }
                });
                this.loadingShow = false;
                let id = msg.data.id;
                //发送报表配置预览
                let newMsg2 = {
                  webMsgType: 1024,
                  funCode: 8,
                };
                newMsg2.data = { id: id };
                this.mySpecialId = publishMsg(newMsg2);
              }
              // }
              break;
            case 8:
              // if (checkSpecialId) {
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.bodyConfigList = msg.data.body;
                this.getBodyData = true;
              }
              // }
              break;
            default:
              break;
          }
          break;
        default:
          DataMessage.onMsg(window.topology, msg);
          break;
      }
    },

    onNodeMessage(pen) {
      let penData = pen.data;
      if (penData != null) {
        if (penData.length > 0) {
          const ctlData = penData[0];
          ctlData.name
            ? (this.FangZhenTitle = ctlData.name)
            : (this.FangZhenTitle = this.FangZhenTitle);
          ctlData.width
            ? (this.DialogWidth = ctlData.width)
            : (this.DialogWidth = this.DialogWidth);
          switch (ctlData.ctrl_type) {
            case 0:
              {
                this.$refs.ykRef.Ykdialog(ctlData);
              }
              break;
            case 1:
              {
                this.$refs.ytRef.Ytdialog(ctlData);
              }
              break;
            case 2:
              //实时报表数据弹窗
              {
                this.getPerview(ctlData);
              }
              break;
            case 3:
              //全能打手工操作
              {
                this.$refs.ytallRef.Ytdialog(ctlData);
              }
              break;
          }
        }
      }
    },
    getPerview(val) {
      //发送报表实时预览
      this.FangZhenDialogVisible = true;
      let newMsg1 = {
        webMsgType: 1024,
        funCode: 7,
      };
      newMsg1.data = { id: val.id };
      this.mySpecialId = publishMsg(newMsg1);
      this.loadingShow = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.preview {
  position: relative;
  height: 100vh;

  .tools {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    & > div {
      flex-grow: 1;
    }

    button {
      margin: 12px 16px;
    }
  }
}
.myClass .el-dialog__header {
  background-color: rgba(0, 15, 52) !important;
  padding: 5px 20px 5px !important;
  .el-dialog__headerbtn {
    top: 8px;
  }
  // .el-dialog__title {
  //   color: #0a74ff96 !important;
  //   font-weight: 600;
  // }
  .headertitle {
    span {
      color: #0a74ff96 !important;
      font-size: 16px;
      font-weight: 600;
    }
    i {
      float: right;
      margin-top: 8px;
      margin-right: 25px;
      cursor: pointer;
    }
  }
}

.myClass .el-dialog__body {
  background-color: rgba(0, 15, 52);
  padding: 5px 20px;
}
::v-deep .myClass {
  background: rgba(0, 15, 52);
}
</style>
